<template>
  <div class="produce-info-dialog">
    <el-dialog v-model="drawerVisible" :destroy-on-close="true" :title="`${title}车型`" width="96%" draggable align-center>
      <el-scrollbar height="100%">
        <div class="info-container">
          <el-form ref="ruleFormRef" label-width="100px" label-suffix=" :" :rules="rules" :model="formData" label-position="top">
            <div class="info-form-group">
              <div class="info-form-group-title mb30">基本信息</div>
              <div class="info-form-group-content info-form-group-content-fr2">
                <div class="info-form-group-content-item">
                  <el-form-item label="产品类型" prop="typeId">
                    <el-select v-model="formData.typeId" placeholder="请选择车辆类型" clearable>
                      <el-option v-for="item in getDict('productId')" :key="item.name" :label="item.name" :value="item.id" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="名称" prop="name">
                    <el-input v-model="formData.name" placeholder="请填写名称" clearable></el-input>
                  </el-form-item>
                </div>
                <div class="info-form-group-content-item info-form-group-content-fr1">
                  <el-form-item label="产品图片" prop="picture">
                    <Upload
                      v-model:image-url="formData.picture"
                      width="142px"
                      height="142px"
                      :file-size="30"
                      :prefix-data="PRODUCT"
                    >
                      <template #empty>
                        <span>请上传主图</span>
                      </template>
                    </Upload>
                  </el-form-item>
                  <el-form-item label="产品特色" prop="remark">
                    <el-input
                      type="textarea"
                      v-model="formData.remark"
                      placeholder="请填写产品特色"
                      clearable
                      rows="6"
                      resize="none"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
            </div>
            <div class="info-form-group">
              <div class="info-form-group-title mb30">本体信息</div>
              <div class="info-form-group-content fr4">
                <el-form-item label="额定负载(kg)" prop="specifiedLoad">
                  <el-input-number v-model="formData.specifiedLoad" :controls="false" placeholder="请输入"> </el-input-number>
                </el-form-item>
                <el-form-item label="额定载荷中心距（mm）" prop="specifiedLoadDistance">
                  <el-input-number v-model="formData.specifiedLoadDistance" :controls="false" placeholder="请输入">
                  </el-input-number>
                </el-form-item>
                <el-form-item label="举升高度（mm）" prop="loadHeight">
                  <el-input-number v-model="formData.loadHeight" :controls="false" placeholder="请输入"> </el-input-number>
                </el-form-item>
                <el-form-item label="标配雷达高度（mm）" prop="radarHeight">
                  <el-input-number v-model="formData.radarHeight" :controls="false" placeholder="请输入"> </el-input-number>
                </el-form-item>
                <div class="custom-item">
                  <span class="custom-item-title">标准货叉尺寸l/s/e（mm）:</span>
                  <div class="custom-item-list">
                    <el-form-item label="L" prop="forkLength" label-position="right" label-width="30px">
                      <el-input-number v-model="formData.forkLength" :controls="false" placeholder="请输入"> </el-input-number>
                    </el-form-item>
                    <el-form-item label="S" prop="forkWidth" label-position="right" label-width="30px">
                      <el-input-number v-model="formData.forkWidth" :controls="false" placeholder="请输入"> </el-input-number>
                    </el-form-item>
                    <el-form-item label="E" prop="forkThickness" label-position="right" label-width="30px">
                      <el-input-number v-model="formData.forkThickness" :controls="false" placeholder="请输入"> </el-input-number>
                    </el-form-item>
                  </div>
                </div>
                <el-form-item label="货叉降至最低位离地高度(mm）" prop="groundHeightLow">
                  <el-input-number v-model="formData.groundHeightLow" :controls="false" placeholder="请输入"> </el-input-number>
                </el-form-item>
                <el-form-item label="货叉上升最高位时车体高度（mm)" prop="groundHeightHigh">
                  <el-input-number v-model="formData.groundHeightHigh" :controls="false" placeholder="请输入"> </el-input-number>
                </el-form-item>
                <el-form-item label="巷道空间（1012托盘，单边200）(mm）" prop="channelWidth">
                  <el-input-number v-model="formData.channelWidth" :controls="false" placeholder="请输入"> </el-input-number>
                </el-form-item>
                <el-form-item label="巷道空间安全距离（单边200）(mm)" prop="channelWidthSafe">
                  <el-input-number v-model="formData.channelWidthSafe" :controls="false" placeholder="请输入"> </el-input-number>
                </el-form-item>
                <el-form-item label="车体转弯半径（mm）" prop="turningRadius">
                  <el-input-number v-model="formData.turningRadius" :controls="false" placeholder="请输入"> </el-input-number>
                </el-form-item>
                <el-form-item label="弧度转弯最小模拟半径（建议值，mm）" prop="turningRadiusMin">
                  <el-input-number v-model="formData.turningRadiusMin" :controls="false" placeholder="请输入"> </el-input-number>
                </el-form-item>
                <el-form-item label="轮胎材质" prop="wheelMaterialId">
                  <el-select v-model="formData.wheelMaterialId" placeholder="请选择" clearable>
                    <el-option v-for="item in getDict('tireMaterial')" :key="item.name" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>
                <el-form-item label="驱动轮尺寸（mm)" prop="wheelDrivingSize">
                  <el-input-number v-model="formData.wheelDrivingSize" :controls="false" placeholder="请输入"> </el-input-number>
                </el-form-item>
                <el-form-item label="承载轮尺寸（mm)" prop="wheelLoadSize">
                  <el-input-number v-model="formData.wheelLoadSize" :controls="false" placeholder="请输入"> </el-input-number>
                </el-form-item>
                <el-form-item label="平衡轮尺寸（mm)" prop="wheelBalanceSize">
                  <el-input-number v-model="formData.wheelBalanceSize" :controls="false" placeholder="请输入"> </el-input-number>
                </el-form-item>

                <el-form-item label="最小离地间隙（mm）" prop="groundClearanceMin">
                  <el-input-number v-model="formData.groundClearanceMin" :controls="false" placeholder="请输入">
                  </el-input-number>
                </el-form-item>
                <div class="custom-item">
                  <span class="custom-item-title">爬坡能力（%）</span>
                  <div class="custom-item-list">
                    <el-form-item label="空载" prop="climbEmpty" label-position="right" label-width="50px">
                      <el-input-number v-model="formData.climbEmpty" :controls="false" placeholder="请输入"> </el-input-number>
                    </el-form-item>
                    <el-form-item label="满载" prop="climbFull" label-position="right" label-width="50px">
                      <el-input-number v-model="formData.climbFull" :controls="false" placeholder="请输入"> </el-input-number>
                    </el-form-item>
                  </div>
                </div>
                <div class="custom-item">
                  <span class="custom-item-title">外形尺寸（LxWx货叉最低位H，mm）:</span>
                  <div class="custom-item-list">
                    <el-form-item label="L" prop="length" label-position="right" label-width="30px">
                      <el-input-number v-model="formData.length" :controls="false" placeholder="请输入"> </el-input-number>
                    </el-form-item>
                    <el-form-item label="W" prop="width" label-position="right" label-width="30px">
                      <el-input-number v-model="formData.width" :controls="false" placeholder="请输入"> </el-input-number>
                    </el-form-item>
                    <el-form-item label="H" prop="height" label-position="right" label-width="30px">
                      <el-input-number v-model="formData.height" :controls="false" placeholder="请输入"> </el-input-number>
                    </el-form-item>
                  </div>
                </div>
                <el-form-item label="自重（kg）" prop="weight">
                  <el-input-number v-model="formData.weight" :controls="false" placeholder="请输入"> </el-input-number>
                </el-form-item>
                <el-form-item label="驱动方式" prop="driveModeId">
                  <el-select v-model="formData.driveModeId" placeholder="请选择" clearable>
                    <el-option v-for="item in getDict('driveType')" :key="item.name" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>
                <el-form-item label="制动方式" prop="brakingMethodId">
                  <el-select v-model="formData.brakingMethodId" placeholder="请选择" clearable>
                    <el-option v-for="item in getDict('brakingSystem')" :key="item.name" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>
                <el-form-item label="驱动电机功率（Kw）" prop="driveMotorPower">
                  <el-input-number v-model="formData.driveMotorPower" :controls="false" placeholder="请输入"> </el-input-number>
                </el-form-item>
                <div class="custom-item">
                  <span class="custom-item-title">最大行驶速度（m/s）</span>
                  <div class="custom-item-list">
                    <el-form-item label="空载" prop="speedDriveEmpty" label-position="right" label-width="50px">
                      <el-input-number v-model="formData.speedDriveEmpty" :controls="false" placeholder="请输入">
                      </el-input-number>
                    </el-form-item>
                    <el-form-item label="满载" prop="speedDriveFull" label-position="right" label-width="50px">
                      <el-input-number v-model="formData.speedDriveFull" :controls="false" placeholder="请输入">
                      </el-input-number>
                    </el-form-item>
                  </div>
                </div>
                <el-form-item label="提升电机功率（Kw）" prop="liftMotorPower">
                  <el-input-number v-model="formData.liftMotorPower" :controls="false" placeholder="请输入"> </el-input-number>
                </el-form-item>
                <div class="custom-item">
                  <span class="custom-item-title">提升速度（m/s）</span>
                  <div class="custom-item-list">
                    <el-form-item label="空载" prop="liftSpeedEmpty" label-position="right" label-width="50px">
                      <el-input-number v-model="formData.liftSpeedEmpty" :controls="false" placeholder="请输入">
                      </el-input-number>
                    </el-form-item>
                    <el-form-item label="满载" prop="liftSpeedFull" label-position="right" label-width="50px">
                      <el-input-number v-model="formData.liftSpeedFull" :controls="false" placeholder="请输入"> </el-input-number>
                    </el-form-item>
                  </div>
                </div>
                <div class="custom-item">
                  <span class="custom-item-title">下降速度（m/s）</span>
                  <div class="custom-item-list">
                    <el-form-item label="空载" prop="dropSpeedEmpty" label-position="right" label-width="50px">
                      <el-input-number v-model="formData.dropSpeedEmpty" :controls="false" placeholder="请输入">
                      </el-input-number>
                    </el-form-item>
                    <el-form-item label="满载" prop="dropSpeedFull" label-position="right" label-width="50px">
                      <el-input-number v-model="formData.dropSpeedFull" :controls="false" placeholder="请输入"> </el-input-number>
                    </el-form-item>
                  </div>
                </div>
              </div>
              <el-form-item label="载荷曲线图" prop="loadLineChartPath">
                <Upload
                  v-model:image-url="formData.loadLineChartPath"
                  width="142px"
                  height="142px"
                  :file-size="30"
                  :prefix-data="PRODUCT"
                >
                  <template #empty>
                    <span>请上传载荷曲线图</span>
                  </template>
                </Upload>
              </el-form-item>
            </div>
            <div class="info-form-group mt30" v-for="(im, keys) in getDict('agvConfig')" :key="`${keys}_agvConfig`">
              <div class="info-form-group-title mb30">{{ im.name }}</div>
              <div class="info-form-group-content fr4">
                <el-form-item
                  :label="item.typeName"
                  :prop="`propertyList[${key}]`"
                  v-for="(item, key) in formData.propertyList.filter(itm => itm.categoryId === im.id && itm.fixed)"
                  :key="item.typeId"
                >
                  <el-select
                    multiple
                    filterable
                    v-model="item.content"
                    placeholder="请选择"
                    clearable
                    @focus="getDicById(item.typeId, item)"
                    @change="val => changeHandlerOptions(val, item, selectList)"
                  >
                    <el-option v-for="item2 in selectList[item.typeId]" :key="item2.id" :label="item2.name" :value="item2.id">
                      <div class="flx-start" style="align-items: center">
                        <span class="rundle-dot" :class="{ bp: isBp(item2.name), xp: isXp(item2.name) }" />
                        <span style="flex: 1; height: 100%">{{ item2.name }}</span>
                      </div>
                    </el-option>
                  </el-select>
                </el-form-item>
                <AddItem v-model:propertyList="formData.propertyList" :category-id="im.id" />
              </div>
            </div>
          </el-form>
        </div>
      </el-scrollbar>
      <template #footer>
        <el-button @click="drawerVisible = false"> 取消 </el-button>
        <el-button type="primary" @click="handleSubmit"> 确定 </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="UserDrawer">
import { onMounted, defineModel, computed, provide } from "vue";
import Upload from "@/components/Upload/Img.vue";
import AddItem from "./addItem/ItemView.vue";
import { PRODUCT } from "@/constants";
import { useDict } from "@/hooks/useDict";
import { useUtile } from "./hooks/useUtil";
import { useData } from "./hooks/useData";
import { useAdd } from "./hooks/useAdd";
import { useEdit } from "./hooks/useEdit";

// 变量
const emits = defineEmits(["refresh"]);
const props = defineProps({
  paramsCar: {
    type: Object,
    default: () => {}
  }
});
const drawerVisible = defineModel("drawerVisible", {
  type: Boolean,
  default: false
});

// computed
const title = computed(() => {
  return props.paramsCar.uiType === 1 ? "新增" : "编辑";
});
const id = computed(() => {
  return props.paramsCar.id;
});
// hook
const { formData, ruleFormRef, rules, selectList } = useData();
const { changeHandlerOptions, changeOptionsData, fittingsFn, isXp, isBp } = useUtile();
const { handleSubmit, initData } =
  props.paramsCar.uiType === 1
    ? useAdd({ formData, title, emits, drawerVisible, ruleFormRef })
    : useEdit({ formData, title, emits, drawerVisible, ruleFormRef, id, selectList });

const { getDict, getDicList } = useDict([
  "productId",
  "driveType",
  "brakingSystem",
  "tireMaterial",
  "batteryInfo",
  "configList",
  "agvConfig"
]);
// provide
provide("selectList", selectList);
// 方法

const getDicById = async (parentIdList: string, obj: any) => {
  let res = {};
  if (obj.type === 4) {
    obj.value = parentIdList;
    res = await fittingsFn(parentIdList);
  } else {
    res = await getDicList({ parentIdList });
  }

  // 处理添加标配和选配
  res = changeOptionsData(res);
  selectList.value = { ...selectList.value, ...res };
};
onMounted(async () => {
  initData();
});
</script>
<style lang="scss" scoped>
@for $i from 1 through 4 {
  .fr#{$i} {
    grid-template-columns: repeat(#{$i}, 1fr);
  }
}
.info-container {
  box-sizing: border-box;
  height: 70vh;
  padding-right: 20px;
}
:deep(.el-dialog__body) {
  --el-fill-color-blank: #f5f7fa;
  --el-select-border-color-hover: transparent;
  --el-select-border-color: transparent;
  --el-border-color: transparent;
  --el-input-border-color: transparent;
  .el-upload {
    background-color: #f5f7fa !important;
  }

  padding: 30px 0 0 20px;
  .el-select,
  .el-cascader,
  .el-input-number,
  .el-date-editor {
    width: 100%;
    .el-input__inner {
      text-align: left;
    }
  }
}
.el-form-item--default {
  margin-bottom: 30px;
}
.info-form-group {
  display: flex;
  flex-flow: column nowrap;
  &-title {
    font-size: 16px;
    font-weight: 600;
    color: #333333;
  }
  &-content {
    display: grid;
    column-gap: 40px;
    .custom-item {
      display: flex;
      flex-flow: column nowrap;
      &-title {
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 400;
        color: #666666;
      }
      &-list {
        display: flex;
        gap: 0 30px;
        .el-form-item {
          display: flex;
          flex: 1;
          align-items: center;
          :deep .el-form-item__label {
            margin-bottom: 0 !important;
          }
        }
      }
    }
  }
  &-content-fr2 {
    grid-template-columns: 1fr 3fr;
  }
  &-content-fr1 {
    display: grid;
    grid-template-columns: 142px auto;
    column-gap: 40px;
  }
}
.info-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 0 30px;
  .el-select,
  .el-cascader,
  .el-input-number,
  .el-date-editor {
    width: 100%;
    .el-input__inner {
      text-align: left;
    }
  }
}
.all-h {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 0 30px;
  width: 100%;
  .el-select,
  .el-cascader,
  .el-input-number,
  .el-date-editor {
    width: 100%;
    .el-input__inner {
      text-align: left;
    }
  }
}
.rundle-dot {
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-radius: 50%;
}
.bp {
  background: #74d98c;
}
.xp {
  border: 1px solid #74d98c;
}
</style>
